<script>
export default {
  name: "User",
  data() {
    return {
      //表格数据
      tableData: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods:{
    //获取用户信息
    getUserList(){
      this.$http({url:"user/test",method:"GET"}).then(res=>{
        this.tableData = res.data.data;
      })
    }
  },
  mounted() {
    //组件加载触发该方法
    //发送请求获取数据
    this.getUserList();
  }
}
</script>


<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--查询列表-->
    <el-row style="margin-top: 20px;">
      <el-col :span="5">
        <el-input
        placeholder="请输入用户名称"
        prefix-icon="el-icon-search"
        v-model="input2">
      </el-input>
      </el-col>
      <el-col :span="5" style="margin-left: 20px">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="5" style="margin-left: 20px">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="5" style="margin-left: 20px">
        <el-time-select
          v-model="value"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          placeholder="选择时间">
        </el-time-select>
      </el-col>
    </el-row>

    <!--查询数据-->
    <el-table
      :data="tableData"
      style="width: 100%;margin-top: 20px" >
      <el-table-column
        prop="userName"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userAccount"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userPassword"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="userEmail"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="userImg"
        label="头像">
      </el-table-column>
    </el-table>
  </div>


</template>



<style scoped>

</style>
